<script setup lang="ts">
import axios from "axios";
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
import Home from "@/views/Home.vue"

// 页面绚烂前执行
// onMounted(() => {
//   alert("页面渲染前调用");
// });

// // 页面销毁前执行
// onUnmounted(() => {
//   alert("页面销毁前执行");
// });

const posts = ref([]);

const getData = async () => {
  try {
    let { data } = await axios("http://localhost:3000/posts");
    posts.value = data;
    console.log("执行请求", data);
  } catch (error) {
    console.log("出现异常了", error);
  }
};

getData();
</script>

<template>
  <div>
    <div v-if="posts.length">
      <Home :posts="posts"></Home>
    </div>
    <div v-else>数据加载中...</div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
